import QtQuick 2.15
//Qt Quick Canvas 圆形进度条实现详解
Item {
    id:myroot
    property int size:150// 进度条尺寸
    property int linewidth:5//进度条线宽
    property real value: 0//进度值
    property color primarycolor:"blue"//进度颜色
    property color secondarycolor:"red"//背景颜色
    property int animationduration:1000//动画持续时间
    property real degree: 0
    width:size
    height:size
    onValueChanged: {
        //进度值改变时，将进度值转换为角度，处理程序在进度值变化时更新 Canvas 的绘制角度
       mycanvas.degree = value * 360;  // 将进度值转换为角度
    }
    Canvas{
        id:mycanvas
        property real degree:0 //当前角度为0
        anchors.fill:parent
        antialiasing: true//开启抗锯齿
        onDegreeChanged: {
            requestPaint();//进度条值改变，角度就会改变，角度改变就需要进行重绘
        }
        onPaint:
    {
            //绘制代码
            var ctx=getContext("2d");//获取 2D 绘图上下文，这是所有绘制操作的基础
            var x=myroot.width/2;//圆心x坐标
            var y=myroot.height/2;//圆形y坐标
            var radius=myroot.size/2-myroot.linewidth;//半径（减去线宽的一半）
            var startangle=(Math.PI/180)*270;//起始角度（270度）
            var fullAngle=(Math.PI/180)*(270+360);//完整圆的角度
            var progresAngle=(Math.PI/180)*(270+degree);//当前进度角度
            ctx.reset();//重置绘图状态
            ctx.lineCap='round';//设置线条端点样式为圆形
            ctx.lineWidth=myroot.linewidth;//设置线条宽度
            ctx.beginPath();//开始新路径
            ctx.arc(x,y,radius,startangle,fullAngle);//绘制完整圆
            ctx.strokeStyle=myroot.secondarycolor;//绘制线条颜色
            ctx.stroke();//描边路径
            ctx.beginPath();//开始新路径
            ctx.arc(x,y,radius,startangle,progresAngle);//设置进度颜色
            ctx.strokeStyle=myroot.primarycolor;//设置进度颜色
            ctx.stroke();//描边路径


        }
    }

    Behavior on degree{
         NumberAnimation{
             duration: myroot.animationduration//角度变化的动画效果
         }
    }



}
